<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core">

<h:body>

	<ui:composition template="../template/template.xhtml">

		<ui:define name="content">
			<p:panel header="service overview">
				<h:form id="form">
					<div class="content">
						<p:commandButton styleClass="topButton" value="add service"
							onclick="addServiceDialog.show();" />

						<p:dataTable var="service" value="#{serviceJSF.serviceDataModel}"
							selection="#{serviceJSF.selectedService}" selectionMode="single">

							<p:ajax update=":form:serviceDetailDialog" event="rowSelect"
								oncomplete="serviceDetailDialog.show()" />

							<p:column headerText="name" sortBy="#{service.name}">
								<h:outputText value="#{service.name}" />
							</p:column>
							<p:column headerText="description" sortBy="#{service.description}">
								<h:outputText value="#{service.description}" />
							</p:column>
							<p:column headerText="duration" sortBy="#{service.duration_in_min}">
								<h:outputText value="#{service.duration_in_min} min" />
							</p:column>
							<p:column headerText="book deadline"
								sortBy="#{service.book_deadline_in_min}">
								<h:outputText value="#{service.book_deadline_in_min} min" />
							</p:column>
							<p:column headerText="cancel deadline"
								sortBy="#{service.cancel_deadline_in_min}">
								<h:outputText value="#{service.cancel_deadline_in_min} min" />
							</p:column>
						</p:dataTable>
					</div>

					<p:dialog id="serviceDetailDialog" header="service detail"
						widgetVar="serviceDetailDialog" resizable="false"
						showEffect="fade" hideEffect="fade" modal="true">
						<table>
							<tr>
								<td><h:outputLabel for="name" value="name*" /></td>
								<td><p:inputText value="#{serviceJSF.selectedService.name}"
										id="name" /></td>
							</tr>
							<tr>
								<td><h:outputLabel for="description" value="description*" /></td>
								<td><p:inputTextarea
										value="#{serviceJSF.selectedService.description}"
										id="description" autoResize="true" /></td>
							</tr>
							<tr>
								<td><h:outputLabel for="duration_in_minutes"
										value="duration in minutes*" /></td>
								<td><p:spinner
										value="#{serviceJSF.selectedService.duration_in_min}"
										id="duration_in_minutes" min="0" /></td>
							</tr>
							<tr>
								<td><h:outputLabel for="book_deadline_in_minutes"
										value="book deadline in minutes*" /></td>
								<td><p:spinner
										value="#{serviceJSF.selectedService.book_deadline_in_min}"
										id="book_deadline_in_minutes" min="0" /></td>
							</tr>
							<tr>
								<td><h:outputLabel for="cancel_deadline_in_minutes"
										value="cancel deadline in minutes*" /></td>
								<td><p:spinner
										value="#{serviceJSF.selectedService.cancel_deadline_in_min}"
										id="cancel_deadline_in_minutes" min="0" /></td>
							</tr>
						</table>
						<p:commandButton value="save" action="#{serviceJSF.updateService}" />
						<p:commandButton value="delete"
							action="#{serviceJSF.deleteService}" />
					</p:dialog>
				</h:form>
			</p:panel>

			<p:dialog id="addServiceDialog" header="add service"
				widgetVar="addServiceDialog" resizable="false" showEffect="fade"
				hideEffect="fade" modal="true">
				<h:form>
					<table>
						<tr>
							<td><h:outputLabel for="name" value="name*" /></td>
							<td><p:inputText value="#{serviceJSF.newService.name}"
									id="name" /></td>
						</tr>
						<tr>
							<td><h:outputLabel for="description" value="description*" /></td>
							<td><p:inputTextarea
									value="#{serviceJSF.newService.description}" id="description"
									autoResize="true" /></td>
						</tr>
						<tr>
							<td><h:outputLabel for="duration_in_minutes"
									value="duration in minutes*" /></td>
							<td><p:spinner
									value="#{serviceJSF.newService.duration_in_min}"
									id="duration_in_minutes" min="0" /></td>
						</tr>
						<tr>
							<td><h:outputLabel for="book_deadline_in_minutes"
									value="book deadline in minutes*" /></td>
							<td><p:spinner
									value="#{serviceJSF.newService.book_deadline_in_min}"
									id="book_deadline_in_minutes" min="0" /></td>
						</tr>
						<tr>
							<td><h:outputLabel for="cancel_deadline_in_minutes"
									value="cancel deadline in minutes*" /></td>
							<td><p:spinner
									value="#{serviceJSF.newService.cancel_deadline_in_min}"
									id="cancel_deadline_in_minutes" min="0" /></td>
						</tr>
					</table>
					<p:commandButton value="save" action="#{serviceJSF.addService}" />
				</h:form>
			</p:dialog>
		</ui:define>

	</ui:composition>

</h:body>

</html>